const tile = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://webrd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
    })
})

var map = new ol.Map({
    target: 'map',
    layers: [tile],
    view: new ol.View({
        center: ol.proj.fromLonLat([107.11040599933166, 34.26271532332011]),
        zoom: 4,
        projection: 'EPSG:3857'
    })
});

let projection = ol.proj.get('EPSG:3857');
let projectionExtent = projection.getExtent();
let size = ol.extent.getWidth(projectionExtent) / 256;
let resolutions = new Array(19);
let matrixIds = new Array(19);
for (let z = 0; z < 19; ++z) {
    // generate resolutions and matrixIds arrays for this WMTS
    resolutions[z] = size / Math.pow(2, z);
    matrixIds[z] = 'EPSG:900913:' + z;
}
const wmts = new ol.layer.Tile({
    opacity: 0.7,
    source: new ol.source.WMTS({
        url: 'https://lzugis.cn/geoserver/gwc/service/wmts',
        layer: 'lzugis:china',
        matrixSet: 'EPSG:900913',
        format: 'image/png',
        projection: projection,
        tileGrid: new ol.tilegrid.WMTS({
            origin: ol.extent.getTopLeft(projectionExtent),
            resolutions: resolutions,
            matrixIds: matrixIds
        }),
        wrapX: true
    })
})
map.addLayer(wmts)
